<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules//vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
         <span id="num">{{num}}</span>
         <button @click="num++">点赞</button>
         <h2>{{name}}有{{num}}</h2>
    </div>
    
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            name:'张三',
            num:100
        },
        methods: {
            show(){
                return this.name
            },
            add(){
                this.num++
            }
        },
        beforeCreate() {
            console.log("beforeCreate*************************")
            console.log(this.name,this.num)
            // console.log(this.show())
            // console.log(document.getElementById("num"))
            // console.log(document.getElementById("num").innerText)
        },
        created() {
            console.log("Create****************************")
            console.log(this.name,this.num)
            console.log(this.show())
            console.log(document.getElementById("num"))
            console.log(document.getElementById("num").innerText)
        },
        beforeMount() {
            console.log("beforeMount***********************")
            console.log(document.getElementById("num").innerText)
        },
        mounted() {
            console.log("mounted*****************************")
            console.log(document.getElementById("num").innerText)
        },
        beforeUpdate() {
            console.log(document.getElementById("num"))
            console.log(document.getElementById("num").innerText)
        },
        updated() {
            console.log(document.getElementById("num"))
            console.log(document.getElementById("num").innerText)
        },
    })

</script>

</html>